import { Component, OnInit, Input } from '@angular/core';
import { Assembly, AssemblyStyles, AssemblyValidators } from '../../../fb-design.model';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'qk-textarea',
    template: `
    <ng-container [formGroup]="form">
        <textarea pInputTextarea [ngStyle]="assembly.attributes.style" [formControlName]="assembly.id"
            placeholder="{{assembly.configs.placeholder}}"></textarea>
        <div *ngIf="formErrors[assembly.id]" class="alert alert-danger">
            <i class="fa fa-times"></i>{{formErrors[assembly.id]}}
        </div>
    </ng-container>
    `,
    styles: [`
        .alert-danger{
            background-color:#f8b7bd;
            margin-top:1px;
            padding:0.429em;
            color:#212121;
            z-index:999;
            position:relative;
        }
        textarea[readonly]{
            background-color: #888;
        }
    `],
    providers: []
})
export class QkTextarea implements OnInit {
    @Input() assembly: Assembly;
    @Input() form: FormGroup;
    @Input() formErrors: any = {}; 
    @Input() mode: number;
    constructor() {}

    ngOnInit() {
        if(this.mode == 2){
            if(1 == this.assembly.authCode){//只读
                $("#mask_"+this.assembly.id).css({'z-index': 1, 'opacity': 0.5, 'background-color':'lightgray'});
            }else if(0 == this.assembly.authCode){//没有权限
                $("#mask_"+this.assembly.id).css({'z-index': 1, 'background-color':'lightgray'});
            }
        }
    }

    ngDoCheck() {
        this.assembly.attributes.refreshStyle();
    }
}